<template>
  <el-dialog
    v-model="dialogVisible"
    title="交办详情"
    width="30%"
    :before-close="handleClose"
  >
    <el-form :model="formData" ref="ruleFormRef" label-width="120px">
      <el-form-item label="交办单据">
        <el-button link type="primary">{{ formData.title }}</el-button>
      </el-form-item>
      <el-form-item label="任务描述">
        <el-input
          v-model="formData.taskDescription"
          :rows="3"
          type="textarea"
        />
      </el-form-item>
      <el-form-item label="任务反馈">
        <el-input v-model="formData.taskFeedback" :rows="3" type="textarea" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { ElMessageBox } from "element-plus";

const dialogVisible = ref(false);
const formData = reactive({
  title: "",
  taskDescription: "",
  taskFeedback: ""
});

const handleClose = (done: () => void) => {
  ElMessageBox.confirm("Are you sure to close this dialog?")
    .then(() => {
      done();
    })
    .catch(() => {
      // catch error
    });
};
const setData = row => {
  console.log("row", row);
  formData.title = row.documentTitle;
};

//暴露出值和方法，供父组件调用
defineExpose({
  dialogVisible,
  setData
});
</script>

<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
